<template>
  <view class="recharge">
    <view class="recharge-box">
      <view>
        <view class="title">电瓶车充电位:{{ getDPC(device_code) }}</view>
      </view>

      <view class="tips">当前枪编号:{{ getQiangNum(device_code) }}</view>

      <view class="input-box">
        <input
          class="input"
          type="number"
          placeholder="请输入整数金额(单位元)"
          v-model="money"
        />
      </view>

      <view class="item-num">
        <view
          :class="money == 10 ? 'num1 checked' : 'num1'"
          data-amount="10"
          @click="choose"
          >10元</view
        >
        <view
          :class="money == 20 ? 'num checked' : 'num default'"
          data-amount="20"
          @click="choose"
          >20元</view
        >
        <view
          :class="money == 30 ? 'num checked' : 'num default'"
          data-amount="30"
          @click="choose"
          >30元</view
        >
      </view>

      <view class="item-num">
        <view
          :class="money == 40 ? ' num1 checked' : 'num1 default'"
          data-amount="40"
          @click="choose"
          >40元</view
        >
        <view
          :class="money == 50 ? ' num checked' : 'num default'"
          data-amount="50"
          @click="choose"
          >50元</view
        >
        <view
          :class="money == 60 ? ' num checked' : 'num default'"
          data-amount="60"
          @click="choose"
          >60元</view
        >
      </view>

      <view class="btn btn-primary btn-recharge" @click="clickRecharge"
        >充电</view
      >

      <!-- <toast id="toastedit">{{ toastTextClone }}</toast> -->
      <view class="tip">
        <view class="protocol"></view>
      </view>

      <view class="br"></view>

      <view class="price-detail">
        <!-- <view class="detail-time">具体计费信息
        <view class="time-duan">长时间低于20瓦会判断已经充满，将停机。</view>
      </view> -->
        <view class="kvinfo" v-for="(item, index) in kv" :key="index">
          <view class="detail-money">
            <view class="ele-service">
              <view class="ele">{{ item.startPower }}瓦</view>
              <view class="ele-add">~</view>
              <view class="service">{{ item.endPower }}瓦</view>
            </view>
            <view class="money-info"
              >{{ Price4Point(item.ePrice) }}元/小时</view
            >
          </view>
        </view>
      </view>

      <view class="br"></view>
    </view>
    <uni-notice-bar show-icon text="长时间低于20瓦会判断已经充满，将停机。" />
    <!-- <van-notice-bar
      left-icon="info-o"
      text="长时间低于20瓦会判断已经充满，将停机。"
      class="my-tip"
    /> -->
  </view>
</template>
<!-- <script module="filters" lang="wxs" src="@/pages/utils/filter.wxs"></script> -->
<script>
import { getDPC, getQiangNum, Price4Point } from "@/utils/util"
// import toast from '@/pages/components/toast/toast';
const app = getApp();
let Store = app.globalData.Store;
let Sign = app.globalData.Sign;
let Api = app.globalData.Api;
export default {
  components: {
    // toast
  },
  // 2 生命周期函数--监听页面加载
  data() {
    return {
      getDPC: getDPC,
      getQiangNum: getQiangNum,
      Price4Point: Price4Point,
      balance: 0,
      money: '',
      balance: 0,
      gobugo: true,
      device_code: '',
      user_id: '',
      devStatus: '-1',
      toOrderDetail: true,
      kv: '',
      toastTextClone: '',
      // value: ""
    };
  },
  onLoad: function (options) {
    // this.setData({
    this.balance = Store.getItem('balance')
    // });
    this.judgeToData(options);
  },
  onShow: function () {
    //是否跳转去订单详情
    if (this.toOrderDetail) {
    }
  },
  onReady: function () {
    // this.toast = this.zpSelectComponent('#toastedit');
  },
  methods: {
    judgeToData: function (options) {
      //第二步过滤终端号

      let device_code = null;
      if (options.device_code.indexOf('_') > 0) {
        var codeAr = options.device_code.split('_');
        var preCode = codeAr[0];
        var sub = parseInt(codeAr[1]);
        device_code = preCode + (sub < 10 ? '_0' + sub : '_' + sub);
      } else {
        device_code = options.device_code;
      }
      console.log(device_code);
      Store.setItem('device_code', device_code);

      //1秒后 检测是否登录
      let that = this;
      // that.setData({
      that.device_code = device_code,
        that.devStatus = this.checkMachine(device_code)
      // });
      let user_id = Store.getItem('user_id');
      if (user_id) {
        // that.setData({
        this.user_id = user_id
        // });
      } else {
        if (this.gobugo) {
          //更新跳转标识
          // this.setData({
          this.gobugo = false
          // });
          //前往获取 userId
          let this_ = this;
          setTimeout(function () {
            uni.redirectTo({
              url: '../sysLogin/sysLogin?pay_source=FROM_DPC'
            });
          }, 1000);
        }
      }
      this.ddd(options.device_code);
    },

    ddd(device_code) {
      let this_ = this;
      const signObject = {
        device_code
      };
      const signvalue = Sign.signutil(signObject);
      app.globalData
        .get(Api.getDPCPrice, {
          device_code,
          sign: signvalue
        })
        .then((res) => {
          console.log(res.kv);
          // this_.setData({
          this.kv = res.kv
          // });
        })
        .catch((e) => {
          console.log(e);
        });
    },

    //手动输入金额
    getMoney(e) {
      let amount = e.detail.value;
      // this.setData({
      this.money = amount
      // });
    },

    //点选按钮
    choose(e) {
      let data = e.currentTarget.dataset;
      // this.setData({
      this.money = data.amount
      // });
      //console.log(this.data.money);
    },

    /**
     * 充电流程 1 用户扫码进入选择金额的界面
     *    1.1 提示预付款的金额
     *    1.2 跳转时 下发自检
     *    1.3 数据库查询最新的充电桩状态 一一进行判断
     *
     */
    clickRecharge() {
      let this_ = this;
      //1 获取最新的充电桩状态
      let device_code = this.device_code;
      if (device_code) {
        const signObject = {
          device_code
        };
        const signvalue = Sign.signutil(signObject);
        app.globalData
          .get(Api.getDPCMachineInfo, {
            device_code,
            sign: signvalue
          })
          .then((res) => {
            console.log(res == null);
            if (res.machine == null) {
              uni.showToast({
                title: '无该充电位信息!   请重新输入或扫码使用',
                icon: 'none',
                duration: 1500
              });
            } else {
              let devStatus = res.machine.stat;
              // this_.setData({
              this_devStatus = devStatus
              // });
              if (devStatus == '1' || devStatus == '0') {
                //判断金额
                if (this_.checkMoney(this_.money)) {
                  //充电桩自检
                  //this_.sendDPCMachine03()

                  //跳转前 判断用户登录是否有效
                  uni.navigateTo({
                    url: '../dpcPayConfirm/dpcPayConfirm?user_id=' + Store.getItem('user_id') + '&device_code=' + this_.device_code + '&price=' + this_.money
                  });
                } else {
                  uni.showToast({
                    title: '请选择金额或输入整数金额!',
                    icon: 'none',
                    duration: 1500
                  });
                }
              } else {
                setTimeout(() => {
                  uni.showToast({
                    title: '充电桩' + this_.changeMachineTrueStatus(devStatus),
                    icon: 'none',
                    duration: 2000
                  });
                  // this_.toast.showToast('充电桩' + this_.changeMachineTrueStatus(devStatus), 2000);
                  // setTimeout(() => {
                  //   uni.hideToast();
                  // }, 600);
                }, 500);
              }
            }
          })
          .catch((e) => {
            if (e.code == -1) {
              setTimeout(() => {
                uni.showToast({
                  title: '未查询到该充电桩',
                  icon: 'none',
                  duration: 2000
                });
              }, 500);
            }
          });
      }
    },

    changeMachineTrueStatus(devStatus) {
      if (devStatus == '2') {
        return '充电中';
      }
      if (devStatus == '4') {
        return '故障';
      }
      if (devStatus == '-1') {
        return '离线';
      }
      return '状态异常';
    },

    //充电桩自检
    sendDPCMachine03: function () {
      let device_code = this.device_code;
      if (device_code) {
        const signObject = {
          device_code
        };
        const signvalue = Sign.signutil(signObject);
        console.log(device_code);
        app.globalData
          .get(Api.sendDPCMachine03, {
            device_code,
            sign: signvalue
          })
          .then((res) => {
            //console.log("自检结束！")
          })
          .catch((e) => {
            console.log(e);
          });
      }
    },

    checkMachine: function (device_code) {
      let that = this;
      let thisStat = -100;
      if (device_code) {
        const signObject = {
          device_code
        };
        const signvalue = Sign.signutil(signObject);
        app.globalData
          .get(Api.getDPCMachineInfo, {
            device_code,
            sign: signvalue
          })
          .then((res) => {
            console.log(res);
            if (res.code == -1) {
              console.log(2);
              that.toast.showToast('充电桩', 2000);
            } else {
              thisStat = res.machine.stat;
            }
          })
          .catch((e) => {
            console.log(e);
          });
      }
      // this.setData({
      this.devStatus = thisStat
      // });
      return thisStat;
    },

    checkMoney: function (money) {
      if (money != '' && money != null) {
        var moneyString = money.toString();
        if (moneyString.indexOf('.') == -1 && moneyString.indexOf('。') == -1) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    }
  }
};
</script>
<style>
@import "./dpcSelMoney.css";
</style>
